<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-01-08 09:23:22
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-10 08:57:10
 * @FilePath: /hr_new_vue3/src/views/Management/Home/InternshipManagement/Summary/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 实习期流程组件-->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title" show-back> </PageHeaderNew>
    </template>
    <div class="detail-card">
      <div class="card-top">
        <div class="card-top-item">
          <a-avatar :size="64" :src="humanDetail.headPortrait"></a-avatar>
        </div>
        <div class="card-top-center">
          <a-space direction="vertical">
            <a-space>
              <h3>{{ `姓名：${humanDetail.name}` }}</h3>
            </a-space>
            <a-space :size="50">
              <a-space>
                {{ `部门：${humanDetail.department}` }}
              </a-space>
              <a-space>
                {{ `职位：${humanDetail.position}` }}
              </a-space>
              <a-space>
                {{ `入职日期：${humanDetail.entryTime}` }}
              </a-space>
            </a-space>
          </a-space>
        </div>
        <div class="card-top-right" v-if="step === 5">
          <div>
            <div class="big-circle">
              <div class="small-circle"></div>
            </div>
          </div>
          <div v-if="finallyScore">
            <a-statistic
              title="考核结果"
              :value="finallyScore"
              show-group-separator
              :precision="2"
            />
          </div>
        </div>
      </div>
      <div class="card-bottom">
        <a-steps :current="step">
          <a-step :value="1">制定方案</a-step>
          <a-step :value="2">方案启动</a-step>
          <a-step :value="3">实习自评</a-step>
          <a-step :value="4">实习评价</a-step>
          <a-step :value="5">评价结束</a-step>
        </a-steps>
      </div>
    </div>
    <section v-show="step === 3">
      <Step3 :user-id="userId" />
    </section>
    <section v-show="step === 4">
      <Step4 :user-id="userId" :isEdit="isEdit" />
    </section>
    <section v-show="step === 5" ref="step5Ref">
      <Step5 :user-id="userId" />
    </section>
  </ContentCard>
</template>

<script lang="ts" setup>
import { GetInternshipEvaluationHumanDetail } from '@/apis/management/human/humanChange/internship';
import {
  getHumanDetail,
  getOrganizationDetailById,
  getPositionDetailById
} from '@/utils/common';
import Step3 from './Components/Step3/index.vue';
import Step4 from './Components/Step4/index.vue';
import Step5 from './Components/Step5/index.vue';
import mitter from '@/utils/mitt';

const route = useRoute();

const props = withDefaults(
  // 参数说明
  defineProps<{
    title: string; // 标题
    step: number; // 步骤
    userId: number; // 实习生id
    isEdit: boolean; // 是否可以编辑
  }>(),
  {
    isEdit: true
  }
);

let humanDetail = ref({
  headPortrait: '', // 头像
  name: '',
  department: '',
  position: '',
  entryTime: ''
});
const getData = async () => {
  try {
    const [humanDetailRes] = await Promise.all([getHumanDetail(props.userId)]);
    humanDetail.value.entryTime = humanDetailRes.entryTime;
    humanDetail.value.headPortrait = humanDetailRes.headPortrait;
    humanDetail.value.name = humanDetailRes.name;
    const [companyRes, deptRes, positionRes] = await Promise.all([
      getOrganizationDetailById(humanDetailRes.companyId),
      getOrganizationDetailById(humanDetailRes.departmentId),
      getPositionDetailById(humanDetailRes.positionId)
    ]);
    humanDetail.value.department = `${companyRes.name} / ${deptRes.name} `;
    humanDetail.value.position = positionRes.name;
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();
let finallyScore = ref(0); // 最终得分

// 在step5组件里面传进来的数据
mitter.on('finallyScore', (val: number) => {
  finallyScore.value = +val;
});
</script>

<style lang="less" scoped>
.detail-card {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  .card-top {
    display: flex;
    padding: 16px;
    .card-top-center {
      flex: 1;
      padding: 0 16px;
    }
  }
  .card-bottom {
    padding: 16px;
  }
  .card-top-right {
    display: flex;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 2px;
  }

  .small-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid green;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    box-sizing: border-box;
    bottom: 5px;
    left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    .confirmed {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .big-circle {
    // box-sizing: border-box;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid green;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    position: relative;
  }
}

footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}
</style>
